<template>
  <div>
    <div class="topnav">
      <div class="left-section">
        <div class="logo">
          <img src="../assets/logoo.png" alt="Logo" />
        </div>
        <div class="title">
          <router-link to="/">《游戏策划》智慧课程</router-link>
        </div>
      </div>
      <div class="searchbox">
        <div class="container">
          <input class="my-autocomplete" v-model="searchQuery" placeholder="搜索..." />
          <button class="icon-button" @click="searchBtn">
            <img src="@/assets/icon-search.png" alt="Icon" class="button-icon" />
          </button>
        </div>
      </div>
      <div class="right-section">
        <ul class="nav-links">
          <li><router-link to="/">首页</router-link></li>
          <li v-if="!token"><router-link to="/login">登录</router-link></li>
          <li v-else class="layui-nav-item">
            <router-link to="#">个人</router-link>

            <dl class="layui-nav-child">
              <dd><a href="/profile">个人中心</a></dd>
              <dd v-if="user_type === 'teacher'">
                <a href="#">教师管理</a>
              </dd>
              <dd v-else><a href="#"><router-link to="/Course-Intro">我的课程</router-link></a></dd>
              <dd><a @click.prevent="logout" href="#"><router-link to="/">账号退出</router-link></a></dd>
            </dl>
          </li>
          <li><router-link to="/help">帮助</router-link>
          </li>
        </ul>
      </div>
    </div>
    <nav>
      <ul>

        <li>
          <router-link to="/course-intro" active-class="active">课程介绍</router-link>
        </li>
        <li>
          <router-link to="/course-resource" active-class="active">课程资源</router-link>
        </li>
        <li>
          <router-link to="/questions" active-class="active">互动问答</router-link>
        </li>
        <li>
          <router-link to="/assignments" active-class="active">作业测试</router-link>
        </li>
        <li>
          <router-link to="/survey" active-class="active">调查统计</router-link>
        </li>
        <li>
          <router-link to="/AI-search" active-class="active">AI搜索</router-link>
        </li>
        <li>
          <router-link to="/knowledge" active-class="active">知识图谱</router-link>
        </li>
      </ul>
    </nav>

  </div>
</template>

<script>
import axios from '../api/axios';
// export default {

//   name: "NavBar",
//   data() {
//     return {
//       restaurants: [],//调用接口数据
//       searchQuery: '',
//       timeout: null,
//       token: null, // 初始化 token 数据为 null
//       user_type: 'student', // 初始化teacheraccount
//     };
//   },
//   mounted() {

//     this.getToken(); // 获取 token
//     this.user_type = localStorage.getItem('user_type');
//   },

//   methods: {
//     searchBtn() {
//       if (this.searchQuery.trim() === '') {
//         // 如果搜索查询为空，则弹出提示  
//         this.$message({
//           showClose: true,
//           message: '搜索内容不能为空，请输入关键字！',
//           type: 'error',
//         });
//       } else {
//         // 如果搜索查询不为空，则跳转到搜索页面  
//         this.$router.push({ name: 'HomeSearch', query: { q: this.searchQuery } });
//       }
//     },

//     handleSelect(item) {
//       console.log(item);
//     },



//     getToken() {
//       // 从 localStorage 中获取 token
//       this.token = localStorage.getItem('token');
//     },
//     // 示例：带有认证信息的请求方法
//     fetchDataWithAuth() {
//       // 确保 token 存在
//       if (!this.token) {
//         console.error('Token 不存在，无法进行请求');
//         return;
//       }

//       // 使用 axios 或其他请求库发送带有认证信息的请求
//       axios.get('https://api.example.com/data', {
//         headers: {
//           Authorization: 'Bearer ' + this.token
//         }
//       }).then(response => {
//         console.log('成功获取数据：', response.data);
//       }).catch(error => {
//         console.error('获取数据失败：', error);
//       });
//     },
//     //退出登录账号
//     logout() {
//       // 执行退出操作，例如清除 token 和其他用户信息
//       localStorage.removeItem('token');  // 清除存储的 token
//       localStorage.removeItem('user_type');
//       // 可以在这里执行其他清理工作，例如重定向到登录页等
//       // 示例：重定向到登录页面
//       //this.$router.push('/login');
//       // 刷新页面
//       window.location.reload();
//     },
//   },

// }



export default {
  name: "NavBar",
  data() {
    return {
      restaurants: [], // 调用接口数据
      searchQuery: '',
      timeout: null,
      token: null, // 初始化 token 数据为 null
      user_type: 'student', // 初始化 user_type
    };
  },
  mounted() {
    this.getToken(); // 获取 token
    this.user_type = localStorage.getItem('user_type');
  },

  methods: {
    searchBtn() {
      if (this.searchQuery.trim() === '') {
        // 如果搜索查询为空，则弹出提示  
        this.$message({
          showClose: true,
          message: '搜索内容不能为空，请输入关键字！',
          type: 'error',
        });
      } else {
        // 如果搜索查询不为空，则跳转到搜索页面  
        this.$router.push({ name: 'AISearch', query: { q: this.searchQuery } });
      }
    },

    handleSelect(item) {
      console.log(item);
    },

    getToken() {
      // 从 localStorage 中获取 token
      this.token = localStorage.getItem('token');
    },

    // 示例：带有认证信息的请求方法
    fetchDataWithAuth() {
      // 确保 token 存在
      if (!this.token) {
        console.error('Token 不存在，无法进行请求');
        return;
      }

      // 使用 axios 或其他请求库发送带有认证信息的请求
      axios.get('https://api.example.com/data', {
        headers: {
          Authorization: 'Bearer ' + this.token
        }
      }).then(response => {
        console.log('成功获取数据：', response.data);
      }).catch(error => {
        console.error('获取数据失败：', error);
      });
    },

    // 退出登录账号
    logout() {
      // 执行退出操作，例如清除 token 和其他用户信息
      localStorage.removeItem('token');  // 清除存储的 token
      localStorage.removeItem('user_type');
      // 清除所有 localStorage 数据
       localStorage.clear();

      // 可以在这里执行其他清理工作，例如重定向到登录页等
      // 示例：重定向到登录页面
      // this.$router.push('/login');

      // 刷新页面
      window.location.reload();
    },
  },

  created() {
    // 在组件创建时设置 Axios 请求拦截器
    axios.interceptors.request.use(
      config => {
        // 在每次请求前，检查本地是否存在 token
        const token = localStorage.getItem('token');
        if (token) {
          // 如果存在 token，则添加到请求的 headers 中
          config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
      },
      error => {
        // 处理请求错误
        return Promise.reject(error);
      }
    );
  },
};

</script>

<style scoped>
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  background-color: rgba(36, 41, 47, 1);
  padding: 0 20px;
}

.layui-nav-child {
  display: none;
  /* 初始状态隐藏 */
  position: absolute;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 170px;
  padding: 10px 0;
  border-radius: 5px;
  /* 添加圆角 */
}

.layui-nav-item {
  height: 40px;
  font-weight: 80px;
}

/* 显示子菜单 */
.layui-nav-item:hover .layui-nav-child {
  display: block;
}

.layui-nav-child dd {
  margin: 0;
  white-space: nowrap;
  border-bottom: 1px solid #ccc;
  /* 添加上边框作为分割线 */
  padding: 5px 0;
  /* 调整分割线上方的空白 */
}

.layui-nav-child dd a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
}

.layui-nav-child dd a:hover {
  color: #007bff;
  background-color: #f2f2f2;
  width: 140px;
}

/* 当前选中项样式 */
.layui-nav-child .layui-this {
  /* background-color: #f2f2f2; */
  color: #007bff;
  margin: 0;
}

nav {
  margin-left: 150px;
  margin-right: 150px;
  background-color: rgba(59, 150, 255, 1);
}

nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  align-items: center;
  margin: 0;
  margin-top: 5px;
}

nav li {
  width: 120px;
  height: 50px;
  align-items: center;
  justify-content: center;
  list-style: none;
  background-color: rgba(59, 150, 255, 1);

}

nav a {
  text-decoration: none;
  color: white;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 50px;

}

nav li:hover {
  background-color: rgba(130, 188, 255, 1);
}

.searchbox {
  margin-left: 300px;
  height: auto;
  width: 400px;
}

.container {
  position: relative;
  margin-left: 180px;
  height: auto;
  width: 150px;
}

.my-autocomplete {
  position: relative;
  /* 确保.icon-button可以相对于它定位 */
  width: 200px;
  height: 32px;
  opacity: 1;
  border-radius: 60px;
  background: rgba(255, 255, 255, 1);
  border: none;
  padding: 2px;
  display: inline-block;
  /* 如果你想要这个元素表现得像一个内联块元素 */
  padding-left: 15px;
  outline: none;
}

.icon-button {
  position: absolute;
  top: 50%;
  /* 相对于父元素顶部偏移50% */
  transform: translateY(-50%);
  /* 向上移动自身高度的50%，实现垂直居中 */
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin-left: 105px;
}

.button-icon {
  width: 100%;
  height: auto;
  display: block;
}

.icon-button:hover {
  filter: brightness(90%);
}

.active {
  background-color: rgba(130, 188, 255, 1);
  color: white;
}

.left-section {
  display: flex;
  align-items: center;
}

.logo {
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-left: 130px;
  margin-top: 20px;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.title {
  margin-left: 10px;
}

.right-section {
  display: flex;
  align-items: center;


}

.nav-links {
  list-style: none;
  padding: 0;
  margin-right: 130px;
  display: flex;
}

.nav-links li:not(:last-child)::after {
  content: "|";
  color: white;
  margin-left: 8px;
}

a {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  font-size: 18px;
}
</style>